<template>
	<view class="layout">
		<view class="search">
			<uni-search-bar 
				v-model="searchValue"
				@confirm="onSearch"
				placeholder="搜索"></uni-search-bar>
		</view>
		
		<view class="connent">
			<scroll-view scroll-y="true" class="scrollView">
				<view v-for="item in studentsList" :key="item._id">
					<view class="studentItem">
						<view class="itemTop">
							<text>学员名称: {{ item.userName }}</text>
							<text>账号: {{ item.accountNumber }}</text>
							<text>剩余学新次数: {{ item.studyNewTimes ?? 0 }}</text>
							<text>剩余复习次数: {{ item.reviewTimes ?? 0 }}</text>
							<text>{{ item.uuid }}</text>
						</view>
						<view class="itemBottom">
							<view class="selectBtn" @click="onClickStudyNew(item.uuid)">
								<text>添加学新次数</text>
							</view>
							<view class="selectBtn" @click="onClickReview(item.uuid)">
								<text>添加复习次数</text>
							</view>
						</view>	
					</view>
				</view>
					

			</scroll-view>
		</view>
		
		<uni-popup ref="modifyDialog" type="center" :is-mask-click="false">
			<view class="modifyDialog">
				<view class="title">
					修改{{mode === 0 ? "学新":"复习"}}次数
				</view>
				<input  class="input" v-model="inputValue" maxlength="10" placeholder="请输入内容" @input="onInput"/>
				<view class="modifyBtnRow">
					<view class="subBtn" @click="subCount(10)">
						-10
					</view>
					<view class="subBtn" @click="subCount(1)">
						-1
					</view>

					<view class="addBtn" @click="addCount(1)">
						+1
					</view>
					<view class="addBtn" @click="addCount(10)">
						+10
					</view>
				</view>
				<view class="buttonRow">
					<view class="confirm" @click="confirm">确认</view>
					<view class="cancel" @click="cancel">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useUserInfoStore } from '../../store';
	
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	
	const searchValue = ref("")
	const studentsList = ref([])
	
	const modifyDialog = ref(null);
	
	const mode = ref(0)
	
	const inputValue = ref(0);
	
	const selectedUuid = ref("");
	
	function onSearch() {
		if(searchValue.value === ""){
			console.log("空")
			return;
		}
		uniCloud.callFunction({
			name: "getStudentsByName",
			data: {
				keyword: searchValue.value
			}
		}).then(res => {
			studentsList.value = res.result.data
			console.log(studentsList.value)
		})
		
	}
	
	function onClickStudyNew(uuid) {
		inputValue.value = 0
		mode.value = 0;
		selectedUuid.value = uuid;
		modifyDialog.value.open()
	}
	
	function onClickReview(uuid) {
		inputValue.value = 0
		mode.value = 1;
		selectedUuid.value = uuid;
		modifyDialog.value.open()
	}
	
	function onInput(e) {
		// const reg = /^-?\d*/g;
		// // inputValue.value = parseInt(e.detail.value, 10)
		// console.log(reg.test(e.detail.value))
		// if(!reg.test(e.detail.value)) {
		// 	// console.log("搜索")
		// 	// if(e.detail.value.startsWith("-")){
		// 	// 	console.log("有减号")
		// 	// 	inputValue.value = "-"
		// 	// 	oldValue = inputValue.value
		// 	// } else {
		// 	// 	inputValue.value = "1212"
		// 	// }
		// 	console.log("搜索1")
			
		// 	console.log(e.detail.value)
		// 	console.log(inputValue.value)
		// } else {
		// 	inputValue.value = parseInt(e.detail.value, 10)
		// }
		
		// inputValue.value = parseInt(e.detail.value, 10)
	}
	
	function addCount(delta) {
		if(!inputValue.value){
			inputValue.value = 0
		}
		inputValue.value = parseInt(inputValue.value, 10) + delta
	}
	
	function subCount(delta) {
		if(!inputValue.value){
			inputValue.value = 0
		}
		inputValue.value = parseInt(inputValue.value, 10) - delta
	}
	
	async function confirm() {
		const reg = /^-?\d+$/g;
		if(reg.test(inputValue.value)) {
			console.log("对的")
			inputValue.value = parseInt(inputValue.value, 10)
			if(inputValue.value === 0) {
				uni.showToast({
					icon:'error',
					title:"未更改数值"
				})
				return
			}
			uni.showLoading({
				title:"修改中",
				mask: true
			})
			const res = await uniCloud.callFunction({
				name: "updateTimes",
				data: {
					uuid: selectedUuid.value,
					value: inputValue.value,
					mode: mode.value
				}
			})
			
			modifyDialog.value.close()
			uni.hideLoading()
			
			onSearch()
		} else {
			uni.showToast({
				icon:'error',
				title:"输入不合法"
			})
			return;
		}
		

	}
	
	function cancel(){
		modifyDialog.value.close()
		// inputValue.value = ''
	}
	
	// function onSelect(item){
	// 	console.log(item)
		// userInfoStore.setSelectedStudentInfo(item)
		// uni.$emit('changeStudent');
		// uni.navigateBack()
	// }
</script>

<style lang="scss" scoped>
	.layout{
		background-color: #F5F5F5;
		height: 100vh;
		.search{
			// background-color: black;
			// height: 250rpx;
			// width: 100rpx;
		}
		.connent{
			padding: 20rpx;
			
			.scrollView{
				font-size: 36rpx;
				.studentItem{
					margin-bottom: 20rpx;
					padding: 20rpx 20rpx;
					background-color: white;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					.itemTop{
						display: flex;
						flex-direction: column;
						gap: 20rpx;
					}
					.itemBottom{
						display: flex;
						justify-content: space-around;
						.selectBtn{
							padding: 20rpx 50rpx;
							border-radius: 50rpx;
							background-color: #18BB7C;
							color: white;
						}
					}
				}
			}
		}
		
		.modifyDialog{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 50rpx;
			padding: 40rpx;
			background-color: white;
			border-radius: 50rpx;
			width: 75vw;
			.input{
				text-align: center;
				padding: 10px 0;
				font-size: 20px;
				border: 2px solid #ccc;
				border-radius: 10px;
			}
			.title{
				color: black;
				font-size: 24px;
			}
			.modifyBtnRow{
				display: flex;
				gap: 10rpx;
				width: 100%;
				font-size: 40rpx;
				.addBtn{
					text-align: center;
					color: white;
					padding: 10rpx 0;
					background-color: #18BB7C;
					border-radius: 10rpx;
					flex: 1;
				}
				.subBtn{
					text-align: center;
					color: white;
					padding: 10rpx 0;
					background-color: #F6465D;
					border-radius: 10rpx;
					flex: 1;
				}
			}
			.buttonRow{
				display: flex;
				flex-direction: row;
				gap: 30rpx;
				.confirm{
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
					background-color: #18BB7C;
					color: white;
					font-size: 24px;
				}
				.cancel{
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
					background-color: #F6465D;
					color: white;
					font-size: 24px;
				}
			}
		}
	}
</style>
